<!--订单发货列详情-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head" :class="{add:todolist.BillState == 'P08'}">
      <div class="dt-head-fix">
        <template v-if="todolist.BillState == 'P08'">
          <detail-header :status="'请安排发货'" :id="todolist"></detail-header>
        </template>
        <template v-else>
          <detail-header :id="todolist"></detail-header>
        </template>
        <!--tab-->
        <div class="lltab mb10 ft14">
          <tab bar-active-color="#77babd" 
               defaultColor="#333333"
               active-color="#77babd"
               :line-width='2'>
            <tab-item selected 
              @on-item-click="tab=true">商品信息</tab-item>
            <tab-item 
              @on-item-click="tab=false">订单反馈</tab-item>
          </tab>
        </div>
      </div>
    </div>
    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <!-- 快速下单的详情start -->
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>
      <!-- 快速下单的详情end -->
      <div class="detail-goods-list">
        <div class="displayflex list-goods-warp" v-for="item in tododetail">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.SupplierGoodsName}}</p>
            <p>{{item.SupplierGoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <p>共订货<span class="red">{{item.SupplierPoQty}}</span>{{item.SupplierUnit}}</p>
          </div>
        </div>
        <p class="detail-mark ft17 no-line" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{todolist.Memo}}</i></p>
        <div class="detail-num">
          <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{(amount || todolist.DetailSum) | fmoney}}</span>
        </div>
      </div>

      <!-- <div class="form-wrap" v-if="todolist.BillState == 'P08'">
        <div class="form-choice line">
          <datetime class="vux-form-require" 
                    format="YYYY-MM-DD HH:mm"
                    v-model="arriveTime" 
                    :show.sync="visibility"
                    title="提货时间" 
                    :start-date="today"
                    placeholder="点击选择"></datetime>
        </div>
        <div class="form-choice line">
          <x-address class="vux-form-require" title="省市区" v-model="addrvalue" :list="addressData" value-text-align="left" placeholder="点击选择">
          </x-address>
        </div>
        <div class="form-wrap-row">
          <div class="line displayflex">
            <div class="label"><span class="red">*</span>详细地址</div>
            <div class="ipt flex1">
              <textarea class="form-txtarea" type="text" placeholder="请输入详细的街道地址" v-model="address"></textarea>
            </div>
          </div>
        </div>
      </div> -->
      <div class="detail-customs">
        <p>要求到货日期：{{todolist.PlanEndDate | time}}<span v-if="todolist.BillState!='P07' && todolist.BillState!='P10'">（{{todolist.PlanEndDate | jsDateDiff}}）</span>
        </p>
        <p>下单时间：{{todolist.BillDate | timeshort}}</p>
      </div>
      <div class="form-btn" 
           v-if="todolist.BillState == 'P08'" 
           @click="accept">发货</div>
      <!-- <div class="detail-bottom" v-if="todolist.BillState == 'P08'">
        <div class="btn" @click="accept">发货</div>
      </div> -->
    </div>
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno='todolist.BillNo'></feed-back>
    </template>
  </div>
</template>

<script>
import detailHeader from "@/components/core/header/detail_header.vue";
import feedBack from "@/components/share/billfb/billfb.vue";
import voiceMsg from "@/components/share/voiceMsg/voicemsg.vue";
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name: "deliveryDetail",
  components: {
    detailHeader,
    feedBack,
    voiceMsg,
    appHeader
  },
  data() {
    return {
      tab: true,
      tododetail: [],
      Feedback: [],
      fdLength: "",
      addrvalue: [],
      addressData: this.ChinaAddressV3Data,
      arriveTime: "",
      visibility: false,
      address: "",
      today: "",
      todolist:[],
    };
  },
  computed: {
    // todolist() {
    //   var value = sessionStorage.item;
    //   return value ? JSON.parse(value) : "";
    // },
    amount() {
      var total = 0;
      for (var i = 0; i < this.tododetail.length; i++) {
        total = total + this.tododetail[i].Amount;
      }
      return total;
    }
  },
  created() {
    this.getDate();
    this.getToday();
    this.getAddress();
  },
  methods: {
    getToday() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      if (month < 9) {
        month = "0" + month;
      }
      if (day < 9) {
        day = "0" + day;
      }
      var time = year + "-" + month + "-" + day;
      this.today = time;
    },
    //获取详情
    getDate() {
      var self = this;
      var query = {
        Guid: this.$route.query.id
      };
      this.Ajax.post("SearchOrderDetailGuid", query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post("SearchOrderGuidNew", query).then(function(resp) {
        self.todolist = resp.Data;
      }); 
    },
    getAddress() {
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
      var query = {
        CCGUID: userinfo.StaffID,
        IsChecked: "Y"
      };
      this.Ajax.post("SearchCustomerAddressApi", query).then(function(resp) {
        self.addrvalue.push(resp.Datas[0].Province);
        self.addrvalue.push(resp.Datas[0].City);
        self.addrvalue.push(resp.Datas[0].District);
        self.address = resp.Datas[0].Address;
      });
    },
    //发货操作
    accept() {
      // if (this.addrvalue.length == 0) {
      //   this.Toast({
      //     message: "请填写提货省市区"
      //   });
      //   return false;
      // }
      // if (!this.address) {
      //   this.Toast({
      //     message: "请填写提货地址"
      //   });
      //   return false;
      // }
      // if (!this.arriveTime) {
      //   this.Toast({
      //     message: "请填写提货时间"
      //   });
      //   return false;
      // }
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
      // var query = {
      //   Guid: this.todolist.Guid,
      //   BuyerGUID: userinfo.StaffID,
      //   BuyerName: userinfo.Name,
      //   BillState: 'P05',
      //   type:'5',
      //   FeedbackGUID: userinfo.StaffID,
      //   FeedbackName: userinfo.Name
      // };
      var query = {
        Guid: this.todolist.Guid,
        OperatorGuid: userinfo.StaffID,
        OperatorName: userinfo.Name,
        // Province: this.addrvalue[0],
        // City: this.addrvalue[1],
        // District: this.addrvalue[2],
        // Address: this.address,
        // PreDeliverDate: this.arriveTime
      };

      this.Ajax.post("DeliveryConfirmation", query).then(function(resp) {
        if (resp.IsSuccess) {
          self.MessageBox.alert("发货成功").then(action => {
            self.$router.go(-1);
          });
        } else {
          self.Toast({
            message: resp.ErrorMessage || "操作失败，请稍后重试"
          });
        }
      });
    }
  }
};
</script>